import { message } from "antd";
import axios from "axios";
import React from "react";
import { Url } from "../url";
import { Table, Tag, Space, Divider, Button, Modal } from 'antd';

import { ExclamationCircleOutlined } from '@ant-design/icons';

const { confirm } = Modal;


export class AskMangement extends React.Component {

    state = {
        askList: []
    }

    componentDidMount = () => {

        this.getAskList();

    }

    getAskList = () => {
        axios.get(Url.askAll).then(
            (response) => {
                this.setState({
                    askList: [...response.data]
                });
            })
            .catch((error) => {
                message.error("Network Error");
            });
    }


    columns = [
        {
            title: 'ID',
            dataIndex: 'id',
            key: 'id',
            render: text => <div style={{ color: "darkblue" }}>{text}</div>,
        },
        {
            title: 'Ask Name',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: 'Description',
            dataIndex: 'description',
            key: 'description',
        },
        {
            title: 'Budget',
            dataIndex: 'cost',
            key: 'cost',
        },
        {
            title: 'Start Time',
            dataIndex: 'startTime',
            key: 'startTime',
            render: text => <div>{(new Date(text)).toLocaleDateString() + " " + (new Date(text)).toLocaleTimeString()}</div>,
        },
        {
            title: 'End Time',
            dataIndex: 'endTime',
            key: 'endTime',
            render: text => <div>{(new Date(text)).toLocaleDateString() + " " + (new Date(text)).toLocaleTimeString()}</div>,
        },
        {
            title: 'State',
            dataIndex: 'state',
            key: 'state',
            render: (text, record) => {
                const state=AskService.getAskState(record);
                if (state === "cancel") {
                    return <div style={{ color: "darkred", fontWeight: "bold" }}>Canceled</div>;
                } else if (state === "finish") {
                    return <div style={{ color: "darkgrey", fontWeight: "bold" }}>Finish</div>;
                }else if(state==="start"){
                    return <div style={{ color: "darkgreen", fontWeight: "bold" }}>In progress</div>;
                }else if(state==="ready"){
                    return <div style={{ color: "darkblue", fontWeight: "bold" }}>Ready</div>;
                }else if(state==="stop"){
                    return <div style={{ color: "darkgrey", fontWeight: "bold" }}>Stop bidding</div>;
                }else{
                    return <div style={{ color: "darkgrey", fontWeight: "bold" }}>Unknown</div>;
                }
            },
        },
        {
            title: 'Action',
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <a href={"/#/ask/" + record.askId}>Detail</a>
                    <Divider type="vertical" />
                    <Button type="link" danger onClick={() => {
                        this.cancelAsk(record);
                    }}  disabled={["finish", "cancel"].includes(AskService.getAskState(record))}>Cancel</Button>
                </Space>
            ),
        },
    ]


    cancelAsk = (ask) => {
        confirm({
            title: 'Are you sure delete this news?',
            icon: <ExclamationCircleOutlined />,
            content: 'Title: ' + ask.name,
            okText: 'Yes',
            okType: 'danger',
            cancelText: 'No',
            onOk: () => {
                axios.post(Url.changeAskState + ask.askId + "/state/cancel").then(() => {
                    message.success("Delete successfully.");
                    this.getAskList();
                }).catch(() => {
                    message.error("Delete failed.");
                });
            },
            onCancel() {
            },
        });
    }
    render = () => {
        return <div style={{ width: "75vw", minHeight: "100%" }}>
            <Table columns={this.columns} dataSource={this.state.askList} />
        </div>
    }
}

export class AskService {

    static getAskState = (ask) => {
        if (ask.state === "cancel") {
            return "cancel";
        } else if (ask.state === "finish") {
            return "finish";
        }
        else {
            const current = (new Date()).getTime();

            if (current >= ask.startTime && current <= ask.endTime) {
                return "start"
            } else if (current <= ask.startTime) {
                return "ready"
            } else {
                return "stop";
            }
        }
    }
}